<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>

	<body>
		<div id="chart-panel" style="height: 600px;width: 100%"></div>
	</body>
	<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
	<script>
		var dom = document.getElementById("chart-panel");
		var myChart = echarts.init(dom);
		var option;
		var xData = ['A', 'B', 'C', 'D', 'e'];
		var data = [55, 40, 77, 57, 20];
		var percent = [21, 28, 51, 35, 15];
		//   let chart = this.$echarts.init(this.$refs.belongSituation)
		var star =
			'';
		var imgList = [];
		var iconData = [];
		data.forEach((item, index) => {
			imgList.push({
				coord: [index, item],
				symbolSize: [100, 50],
				symbolKeepAspect: true,
				symbolOffset: [-40, -185],
				symbol: 'image://' + star,
			});
			iconData.push({
				value: item,
				symbolPosition: 'end',
			});
		});
		// console.log(iconData)
		var option = {
			backgroundColor: 'rgb(8,25,34)',
			tooltip: {
				trigger: 'axis',
				backgroundColor: 'rgba(7,55,63,0.7)',
				borderColor: 'rgba(7,55,63,0.7)',
				textStyle: {
					color: '#fff',
				},
				formatter: function(params) {
					return params[0].marker + '' + params[0].name + ': ' + params[0].value;
				},
			},
			grid: {
				bottom: '20%',
				right: 0,
				left: 0,
			},
			xAxis: {
				data: xData,
				axisTick: {
					show: false,
				},
				axisLine: {
					show: false,
				},
				axisLabel: {
					show: true,
					textStyle: {
						color: '#fff',
					},
				},
			},
			yAxis: {
				splitLine: {
					show: false,
				},
				axisTick: {
					show: false,
				},
		 	axisLine: {
					show: false,
				},
				axisLabel: {
					show: false,
				},
		 },
			series: [{
					name: '权属情况',
					type: 'effectScatter',
					rippleEffect: {
						period: 1,
						scale: 2,
						brushType: 'fill',
					},
					symbolSize: [100, 25],
					symbolOffset: [0, 10],
					z: 12,
					itemStyle: {
						normal: {
							color: '#14b1eb',
							opacity: 0.5,
						},
					},
					data: iconData,
				},
				{
					name: '',
					type: 'pictorialBar',
					symbolSize: [130, 30],
					symbolOffset: [0, -2],
					z: 10,
					itemStyle: {
						normal: {
							color: 'transparent',
							borderColor: '#14b1eb',
							borderType: 'solid',
							borderWidth: 5,
						},
					},
					data: iconData,
				},
				{
					name: '',
					type: 'pictorialBar',
					symbolSize: [100, 25],
					symbolOffset: [0, -5],
					z: 10,
					itemStyle: {
						normal: {
							color: 'transparent',
							borderColor: '#14b1eb',
							borderType: 'solid',
							borderWidth: 5,
						},
					},
					data: iconData,
				},
				{
					name: '',
					type: 'pictorialBar',
					symbolSize: [50, 10],
					symbolOffset: [0, -5],
					z: 12,
					itemStyle: {
						normal: {
							color: 'rgb(9,227,255)',
						},
					},
					data: iconData,
				},
				{
					type: 'bar',
					itemStyle: {
						normal: {
							color: {
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								type: 'linear',
								global: false,
								colorStops: [{
										offset: 0,
										color: 'rgb(24,118,158)',
									},
									{
										offset: 1,
										color: 'rgba(9,30,41,0.5)', //底部渐变颜色
									},
								],
		 				},
						},
					},
					silent: true,
					barWidth: 100,
					barGap: '-100%', // Make series be overlap
					data: data,
					label: {
						show: true,
						position: 'top',
						distance: 15,
						color: '#fff',
						fontSize: 12,
						formatter: (params) => {
							// console.log(params)
							return '{a|' + params.value + '}' + '株' + '\n' + '{b|' + percent[params.dataIndex] +
								'%}';
						},
						rich: {
							a: {
								color: '#03adff',
								fontSize: 18,
								fontWeight: 'bold',
							},
							b: {
								color: '#fff',
								fontSize: 16,
								marginTop: 15,
							},
						},
					},
					markPoint: {
						data: imgList,
					},
				},
			],
		};
		//   chart.setOption(option)


		if (option && typeof option === 'object') {
			myChart.setOption(option);
		}
	</script>
</html>
